<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头部</title>
    <!-- Bootstrap基础CSS样式 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 公共类CSS样式 -->
    <link rel="stylesheet" href="util/css/public.css">
    <!-- 单页CSS样式 -->
    <link rel="stylesheet" href="util/css/main.css">
</head>
<body>
<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <!--头部登陆按钮栏-->
                <div class="col-sm-3 pull-left">
                    亲，请<a href="../html/login.html">登陆</a>或者免费<a href="../html/register.html">注册</a>
                </div>
                <div class="col-sm-4 pull-right hidden-xs">
                    <a href="../html/index.html" class="clra">商城首页</a>&nbsp;&nbsp;
                    <a href="" class="clra"><i class="fa fa-user"></i> 个人中心</a>&nbsp;&nbsp;
                    <a href="" class="clra"><i class="fa fa-shopping-cart"></i> 购物车</a>&nbsp;&nbsp;
                    <a href="" class="clra"><i class="fa fa-heart"></i> 收藏夹</a>
                </div>
            </div>
            <!--头部登陆按钮栏-->

            <!-- 搜索栏及logo图 -->
            <div class="col-sm-12">
                <div class="searchBox">
                    <!-- logo -->
                    <div class="col-sm-4 pull-left hidden-xs"><img src="../img/logobig.png" alt="a"></div>
                    <!-- 搜素框 -->
                    <div class="search col-xs-12 col-sm-8 input-group">
                        <input type="text" class="form-control"placeholder="请输入搜索内容" />
                        <span class="input-group-btn">
               <button class="btn">搜索</button>
            </span>
                    </div>
                </div>
            </div>
            <!-- 搜索栏及logo图 -->

            <!-- 头部nav -->
            <div class="col-sm-12">
                <div class="nav">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#" class="clra" style="color: white;width: 120px;margin-left: 20px">全部分类</a></li>
                        <li class=""><a class="clra" href="#">首页</a></li>
                        <li class=""><a class="clra" href="#">闪购</a></li>
                        <li class=""><a class="clra" href="#">限时抢</a></li>
                        <li class=""><a class="clra" href="#">团购</a></li>
                        <li class=""><a class="clra" href="#">大包装</a></li>
                    </ul>
                    <button class="myWelfare pull-right btn btn-danger hidden-xs" style="color: yellow;"><i class="fa fa-dollar"></i> &nbsp我的福利 ></button>
                </div>
            </div>
            <!-- 头部nav -->
        </div>
    </div>
</div>

<!-- JQuery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap基础JS样式 -->
<script src="js/bootstrap.min.js"></script>
<!-- 阿里巴巴字体 -->
<script src="//at.alicdn.com/t/font_709290_18xs3219rfc.js"></script>
</body>
</html>